<template>
  <div>
    com1
    <div>
      <img :class="{reload:reloadState.state}" src="../assets/img/reload.png" alt="">
    </div>
    <el-button v-on:click="btnClick" type="primary">{{reloadState.text}}</el-button>
    <a href="/test">com1</a>
  </div>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
</template>

<script>
export default {
  name: "com1",
  data() {
    return {
      reloadState:{
        state: false,
        text:"开始"
      }
    }
  },
  methods: {
    btnClick() {
      this.reloadState.state = !this.reloadState.state
      this.reloadState.text = this.reloadState.text==="开始"?"结束":"开始"
    }

  },
}
</script>

<style scoped>
/*.reload {*/
/*  background-color: #0ff;*/
/*}*/
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.reload {
  -webkit-transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}

</style>